.SelectableElement {
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition:
        background-color 200ms ease,
        color 200ms ease,
        border 200ms ease;

    &.SelectableElement--selected {
        color: var(--color-text-primary);
        text-decoration: underline;
        background: var(--color-accent);

        [theme='dark'] & {
            color: var(--color-text-primary-inverse);
        }
    }

    &:hover {
        color: var(--color-text-primary);
        background: var(--color-accent-hover);

        [theme='dark'] & {
            color: var(--color-text-primary-inverse);
        }
    }

    &:active {
        color: var(--color-text-primary);
        background: var(--color-accent-active);

        [theme='dark'] & {
            color: var(--color-text-primary-inverse);
        }
    }
}
